<template>
  <div>
    <Loading v-if="loading" />

    <div class="fixed_full box bg" ref="box">
      <div class="nav">
        <router-link :to="{ path: 'books'}" class="button border nav_item">全部书籍</router-link>
        <router-link :to="{ path: 'history'}" class="button border nav_item">阅读记录</router-link>
      </div>

      <div class="search">
        <input
          v-model="keyword"
          @keyup.enter="get_books"
          class="search_input border"
          type="text"
          placeholder="搜索"
        />
      </div>

      <ul class="books">
        <li class="book border_top" v-for="b in this.books" :key="b.book_id">
          <div class="cover">
            <img v-lazy="config.apis.cover + b.book_id + '.jpg'" />
          </div>
          <div class="bookinfo">
            <router-link
              :to="{ name: 'reader', params: { id: b.book_id,name: b.book_name }}"
              class="book_name"
            >{{b.book_name}}</router-link>

            <p class="book_brief">作者：{{b.book_author.replace(/^\s+|\s+$/g, "")}}</p>
            <p class="book_brief">{{b.book_brief}}</p>
          </div>
        </li>

        <li class="flex_between border_top">
          <span class="button border" @click="index_change(-1)">上一页</span>
          <span class="button border" @click="index_change(1)">下一页</span>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import config from "../config.js";
import axios from "axios";
import Loading from "@/components/Loading.vue";

export default {
  name: "all",
  components: {
    Loading,
  },
  data: function () {
    return {
      loading: false,
      books: [],
      keyword: "",
      start: 1,
      config: config,
    };
  },
  mounted: function () {
    this.get_books();
  },
  methods: {
    get_books: function () {
      this.loading = true;
      axios
        .get(
          config.apis.books + (this.start * 10 - 10) + "/10?k=" + this.keyword,
          {
            headers: {
              "x-api-code": localStorage["x-api-code"],
            },
          }
        )
        .then((response) => {
          this.books = response.data.books;
          if (this.books.length == 0) {
            alert("真的没有了");
          }
        })
        .catch((error) => {
          if (error.response.status == 404) {
            alert("错误代码 404");
          } else if (error.response.status in { 400: "", 401: "", 403: "" }) {
            alert("错误代码 400/401/403");
            delete localStorage["x-api-code"];
            location.assign("/#/login");
          } else {
            alert("意外错误");
          }
        })
        .finally(() => {
          this.$refs.box.scrollTop = 0;
          this.loading = false;
        });
    },
    index_change: function (N) {
      let start = Number(this.start) + Number(N);
      if (start < 1) {
        alert("已经是第一页了");
      } else {
        this.start = start;
        this.get_books();
      }
    },
  },
};
</script>

<style>
.search {
  width: 100%;
  margin: .5rem 0;
}

.search input {
  width: 100%;
  padding: 0.5rem;
  color: #177cb0;
}

.book {
  display: flex;
  justify-content: left;
  padding: 0.75rem 0;
}

.cover img {
  display: inline-block;
  width: 5rem;
  margin-right: 1rem;
}

.bookinfo {
  display: flex;
  flex-direction: column;
}

.book_name {
  font-size: 1rem;
  line-height: 1.5rem;
  color: #177cb0;
  font-weight: bold;
}

.book_brief {
  line-height: 1.35rem;
  font-size: 0.9rem;
}
</style>

